<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['运维管理[环卫]','重量异常明细']" icon="fa fa-newspaper-o" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header><span class="widget-icon"> <i class="fa fa-table"></i> </span><h2>重量异常明细</h2></header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn">
								<sa-company-tree-car  companyTreeId="searchcompanyTree" tcarNumberSelect2="searchCarNumberSelect2" [companyData]="companyData" (companySelected)="companySelected($event)" sourceCarUrl="carInfo/queryCarNumber.html" typeFlag="4"></sa-company-tree-car>
								<div class="top_module top_module_box">
                                    <span class="module_text">设备ID</span>
                                    <input type="text" class="module_inp top_module_select" [(ngModel)]="deviceId" placeholder="设备ID"/>
                                </div>
								<div class="selectDate top_module">
									<table-select-date [notInit]='true' [specifyId]="specifyId" (outerTime)="getSelectTableTime($event)" [specifyTime]='initDateRange'></table-select-date>
								</div>
								<button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
								<button type="button" class="btn btn-primary" (click)="exportData()">导出</button>
							</div>
							<!--<div class="right top-search">
								<input type="text" [(ngModel)]="searchKey" (change)="table_search()" class="search-input" placeholder="关键字...">
								<span class="top-search-box">
							        <button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>
							    </span>
							</div>-->
						</div>
						<div class="table_scroll">
							<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                                <thead>
                                    <tr>
                                        <th>公司名称</th>
                                        <th>车牌号码</th>
                                        <th>设备ID</th>
                                        <th>RFID</th>
                                        <th>车辆分类</th>
                                        <th>
                                            <span>0kg次数</span>
                                            <span class="sort-icon">
                                                <i class="fa  fa-caret-left" [ngClass]="{active:columnSortFlag == 1}" (click)="columnSort(1)"></i>
                                                <i class="fa  fa-caret-right" [ngClass]="{active:columnSortFlag == 2}" (click)="columnSort(2)"></i>
                                            </span>
                                        </th>
                                        <th>
                                            <span>>300kg次数</span>
                                            <span class="sort-icon">
                                                <i class="fa  fa-caret-left" [ngClass]="{active:columnSortFlag == 3}" (click)="columnSort(3)"></i>
                                                <i class="fa  fa-caret-right" [ngClass]="{active:columnSortFlag == 4}" (click)="columnSort(4)"></i>
                                            </span>
                                        </th>
                                        <th>时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let row of tableData" >
                                        <td>{{row.companyName}}</td>
                                        <td>{{row.carNumber}}</td>
                                        <td>{{row.deviceId}}</td>
                                        <td>{{row.rfid}}</td>
                                        <td>{{row.useTypeL2}}</td>
                                        <td>{{row.zeroNum}}</td>
                                        <td>{{row.threeThousandNum}}</td>
                                        <td>{{row.carUploadDate}}</td>
                                        <td>
                                            <button (click)="rowDetail(row)">分析处理</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
						</div>
						<div class="table-fix clearfix">
							<paginator [totalRecords]="totalCount"
						           [rows]="pageSize"
						           [currentPage]="curPage - 1"
						           (onPageChange)="paginate($event)">
							</paginator>
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</sa-widgets-grid>
</div>
<!-- 数据分析处理   弹窗-->
<div id="analyseModal">

    <div class="modal-dialog modal-lg" style="width: 1400px;margin: 0;">
        <div class="modal-content">
            <div class="modal-header" id="analyseModalheadDrag">
                <button type="button" class="close" (click)="cancelAnalyseModal()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">数据分析处理</h4>
            </div>
            <div class="modal-body" style="padding: 0;background-color: #ffffff;">
                <sa-problem-analyse #analyseComponent [isShowTitle]="false" ></sa-problem-analyse>
            </div>
        </div>
    </div>
    <div style="position: absolute;right: 1px; bottom: 1px;width: 30px;height: 24px;">
        <button class="dragBtn btn btn-primary" id='dragArrow' title="拖拽改变弹窗宽度"> ↔ </button>
    </div>
</div>
<!-- 数据分析处理 END -->
<style>
    .echartContainer .textTitle {
        font-size: 12px;
        line-height: 28px;
        height: 28px;
        color: #666666;
    }

    .echartContainer .textLeft {
        width: 50%;
        white-space: nowrap;
        text-align: right;
        display: inline-block;
    }

    .echartContainer .normal {
        font-size: 16px;
        color: #5de2ca;
    }

    .echartContainer .abnormal {
        font-size: 16px;
        color: #A020F0;
    }

    .echartContainer .norail {
        font-size: 16px;
        color: #3333ff;
    }

    .echartContainer .error {
        font-size: 16px;
        color: #cc0000;
    }

    .echartContainer .platformerror {
        font-size: 16px;
        color: #ff993e;
    }

    .echartContainer .shortBox {
        position: absolute;
        top: 0px;
        right: 20px;
        z-index: 9;
    }

    .echartContainer .totalNumber {
        font-size: 16px;
        color: #203330;
    }

    .echartContainer .shortBox .btn-primary {
        color: #fff;
    }
    /* 数据分析处理的弹框 */
    #analyseModal{
        position: absolute;
        left: calc(50% - 700px);
        top: 30px;
        z-index: 1060;
        display: none;
    }
    #analyseModal .form-group {
        white-space: nowrap;
    }
    /* #analyseModal .btn {
        padding: 4px 12px;
    } */
    #analyseModal .refresh_btn{
        padding: 0;
    }
    #analyseModal .dragBtn{
        position: absolute;
        left: inherit !important;
        right: 0px;
        border-radius: 4px;
        min-width: 28px;
        top: 1px;
        padding: 0;
        height: 22px;
        margin: 0;
        line-height: 10px;
        cursor: w-resize;
        background: white;
        border: none;
        box-shadow: none;
        color: #1a6ddd;
        font-size: 24px;
        padding-bottom: 4px;
    }
    #analyseModal .dragBtn:active{
        background: #f5f3f0 !important;
        color: #1a6ddd;
    }
    #analyseModal .btn-orange,#analyseModal .btn-orange:active{
        background-color: orange!important;
        border-color: orange!important;
    }
</style>